<template>
    <view class='page'>
        <u-navbar class="gradient-bg" :title="title" navbarType="0" fontColor="#ffffff" gradient="linear-gradient(to bottom right, #2e996f, #3f99ab)"></u-navbar>
        <view class="form box">
            <view class="evan-form-show">
                <evan-form :hide-required-asterisk="hideRequiredAsterisk" ref="form" :model="form" :rules="rules">
                    <evan-form-item label="服务名称">
                        <span>{{ data.name }}</span>
                    </evan-form-item>
                    <evan-form-item label="蔚蓝抽成">
                        <input class="form-input" placeholder-class="form-input-placeholder" v-model="form.weilan_take_rata " disabled />
                        <view class="unit">%</view>
                    </evan-form-item>
                    <evan-form-item label="加盟商抽成" prop="busin_take_rata">
                        <input class="form-input" placeholder-class="form-input-placeholder" v-model="form.busin_take_rata" placeholder="请输入加盟商抽成比例" type="number"
                            @input="handPrice('busin_take_rata', $event)" />
                        <view class="unit">%</view>
                    </evan-form-item>
                    <evan-form-item label="一级大团长抽成" prop="one_tc_take_rata">
                        <input class="form-input" placeholder-class="form-input-placeholder" v-model="form.one_tc_take_rata" placeholder="请输入一级大团长抽成比例"
                            type="number" @input="handPrice('one_tc_take_rata', $event)" />
                        <view class="unit">%</view>
                    </evan-form-item>
                    <evan-form-item label="二级大团长抽成" prop="two_tc_take_rata">
                        <input class="form-input" placeholder-class="form-input-placeholder" v-model="form.two_tc_take_rata" placeholder="请输入二级大团长抽成比例"
                            type="number" @input="handPrice('two_tc_take_rata', $event)" />
                        <view class="unit">%</view>
                    </evan-form-item>
                    <evan-form-item label="一级团长抽成" prop="one_gl_take_rata">
                        <input class="form-input" placeholder-class="form-input-placeholder" v-model="form.one_gl_take_rata" placeholder="请输入一级团长抽成比例"
                            type="number" @input="handPrice('one_gl_take_rata', $event)" />
                        <view class="unit">%</view>
                    </evan-form-item>
                    <evan-form-item label="二级团长抽成" prop="two_gl_take_rata">
                        <input class="form-input" placeholder-class="form-input-placeholder" v-model="form.two_gl_take_rata" placeholder="请输入二级团长抽成比例"
                            type="number" @input="handPrice('two_gl_take_rata', $event)" />
                        <view class="unit">%</view>
                    </evan-form-item>
                </evan-form>
            </view>

            <view class="btn">
                <u-button type="success" @click="submit()">提交</u-button>
            </view>
        </view>
    </view>
</template>

<script>
import { getTakeInfo, setTakeInfo } from "@/api/service.js"
export default {
    components: {},
    data() {
        return {
            title: '抽成比例',
            data: {},
            form: {
                weilan_take_rata: '',
                service_code: '',
                busin_take_rata: '',
                one_tc_take_rata: '',
                two_tc_take_rata: '',
                one_gl_take_rata: '',
                two_gl_take_rata: '',
            },
            rules: {
                busin_take_rata: {
                    required: true,
                    message: '请输入加盟商抽成比例'
                },
                one_tc_take_rata: {
                    required: true,
                    message: '请输入一级大团长抽成比例'
                },
                two_tc_take_rata: {
                    required: true,
                    message: '请输入二级大团长抽成比例'
                },
                one_gl_take_rata: {
                    required: true,
                    message: '请输入一级团长抽成比例'
                },
                two_gl_take_rata: {
                    required: true,
                    message: '请输入二级团长抽成比例'
                },
            },
        };
    },
    onLoad(query) {
        if (query) {
            this.data = JSON.parse(decodeURIComponent(query.data))
            console.log(this.data, "data111")
            this.getInfo()
        }
    },
    mounted() {
        this.$refs.form.setRules(this.rules)
    },
    methods: {
        getInfo() {
            getTakeInfo({ service_code: this.data.code }).then(res => {
                console.log(res, "res111222")
                if (res.code == 1) {
                    this.form = res.data
                }
            })
        },
        handPrice(field, e) {
            let val = e.target.value.replace(/(^\s*)|(\s*$)/g, "")
            if (!val) {
                this.val = '';
                return
            }
            var reg = /[^\d.]/g
            val = val.replace(reg, "")
            val = val.replace(/^\./g, "");
            val = val.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
            val = val.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');
            val = val > 100 ? 100.00 : val
            this.$nextTick(() => {
                this.form[field] = val;
            })
        },
        submit() {
            this.$refs.form.validate((val) => {
                if (val) {
                    setTakeInfo(this.form).then(res => {
                        if (res.code == 1) {
                            this.$message("操作成功")
                            setTimeout(() => {
                                uni.navigateBack();
                            }, 500);
                        }
                    })
                }
            })
        }
    },
};
</script>
<style scoped lang='scss'>
.page {
  .form {
    background: #ffffff;
    .evan-form-show {
      padding: 0 20rpx 20rpx;
      .form-input {
        font-size: 28rpx;
        color: #333;
        // text-align: right;
        text-align: left;
        width: 100%;
        box-sizing: border-box;
        height: 100rpx;
        line-height: 50rpx;
        // text-indent: 36rpx;

        &.textarea {
          height: 240rpx;
          padding: 24rpx 0;
          text-align: left;
        }
      }

      .form-input-placeholder {
        font-size: 28rpx;
        color: #999;
      }

      &__button {
        width: 100%;
        height: 88rpx;
        border-radius: 8rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        font-size: 36rpx;
        color: #fff;
        margin-top: 20rpx;
        background-color: #2d87d5;

        &::before,
        &::after {
          border: none;
        }
      }

      .customize-form-item {
        &__label {
          font-size: 28rpx;
          color: #333;
          margin-bottom: 16rpx;
        }

        &__radio {
          display: flex;
          align-items: center;
          margin-bottom: 16rpx;

          &__text {
            font-size: 28rpx;
            color: #333;
          }
        }
      }
    }
    /deep/.evan-form-item-container__label {
      font-size: 28rpx;
      color: #333333;
      width: 220rpx;
      text-align: justify;
      text-align-last: justify;
      padding-right: 36rpx;
      line-height: 50rpx;
    }
    .more {
      /deep/.evan-form-item-container__label {
        width: 260rpx;
      }
    }
    .fw {
      //   /deep/.evan-form-item-container__label {
      //     width: 360rpx;
      //   }
      /deep/.evan-form-item-container__main {
        display: flex;
        justify-content: space-between;
        align-items: center;
        label {
          margin-left: 20rpx;
          text {
            padding-left: 20rpx;
            line-height: 90rpx;
          }
        }
      }
    }
    .btn {
      margin-top: 30rpx;
    }
  }
}
</style>